.mini-site-preview {
	.mini-site-preview__browser-chrome {
		flex-grow: 0;
		flex-shrink: 0;

		border-top-left-radius: 10px;
		border-top-right-radius: 10px;

		background-color: #c6d7e2;
		color: #9daeb8;
		height: 35px;

		padding-left: 12px;

		font-size: 14px;
		letter-spacing: 2px;

		/* Used to center the dots vertically */
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.mini-site-preview__image {
		border: 1px solid #c6d7e2;
		position: relative;
		overflow: hidden;

		&::after {
			content: '';
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			background: linear-gradient(
				to bottom,
				rgba( 255, 255, 255, 0 ),
				rgba( 255, 255, 255, 0 ) 50%,
				rgba( 255, 255, 255, 1 )
			);
			background-repeat: no-repeat;
		}
	}

	.mini-site-preview__favicon {
		vertical-align: middle;
	}
}
